import { useState, useEffect } from 'react';
import { LeftOutlined,MoonOutlined } from '@ant-design/icons';
import { GetArticleById,addAccessCount } from '../../api/Home/index';
import MarkdownToJsx from '../../components/MarkdownToJsx/MarkdownToJsx';
export const ArticlesDetail = ({ ArticleId,back }) => {

    const [Article, setArticle] = useState({});//文章数据

    useEffect(() => {//挂载函数
        console.log(ArticleId);

        addAccessCount(ArticleId).then(({data})=>{
            console.log(data.data);
        })

        GetArticleById(ArticleId).then(({ data }) => {
            console.log(data.data);

            setArticle(data.data);
        })
    }, []);

    return (
        <>
            <div className='ArticleHeader'>
                <div className='flex items-center justify-between'>
                    <LeftOutlined onClick={back}/>
                    <p>{Article.title}</p>
                    <div><MoonOutlined /></div>
                </div>

                <div style={{textAlign:'left'}}>
                    <MarkdownToJsx content={Article.content} />
                </div>
            </div>
        </>
    );
}